<template>
  <div class="register">
    <article class="header">
      <header>
        <el-avatar icon="el-icon-user-solid" shape="circle"></el-avatar>
        <span class="login">
          <em class="bold">已有账号？</em>
          <a href="/login">
            <el-button type="primary" size="small">登录</el-button>
          </a>
        </span>
      </header>
    </article>
    <el-steps :active="active" finish-status="success">
      <el-step title="步骤 1"></el-step>
      <el-step title="步骤 2"></el-step>
    </el-steps>

    <section>
      <el-from
        ref="rulefrom"
        :model="ruleForm"
        :rules:="rules"
        label-width="100px"
        class="demo-rulefrom"
        autocomplete="off"
      >
        <div v-if="active == 0">
          <el-from-item prop="textarea">
            <el-input
              :value="ruleFrom.textarea"
              type="textarea"
              :rows="10"
              :readonly="true"
            >
            </el-input>
          </el-from-item>
          <el-from-item prop="agreed">
            <el-checkbox v-model="releFrom.agreed">同意注册协议</el-checkbox>
          </el-from-item>
        </div>
        <div v-if="active == 1">
          <el-from-item label="用户名" prop="name">
            <el-input v-model="ruleFrom.name" />
          </el-from-item>
          <el-from-item label="邮箱" prop="email">
            <el-input v-model="ruleFrom.email" />
            <el-button size="mini" round @click="sendMsg">发送验证码</el-button>
            <span class="status"> {{ statusMsg }}</span>
          </el-from-item>
          <el-from-item label="验证码" prop="code">
            <el-input v-model="ruleFrom.code" maxlength="4" />
          </el-from-item>
          <el-from-item label="密码" prop="pwd">
            <el-input v-model="ruleFrom.pwd" type="password" />
          </el-from-item>
          <el-from-item label="确认密码" prop="cpwd">
            <el-input v-model="ruleFrom.cpwd" type="password" />
          </el-from-item>
        </div>
      </el-from>
    </section>
    <div class="footer">
      <el-button
        v-if="active > 0"
        type="primary"
        icon="el-icon-arrow-left"
        @click="prev"
        >上一步</el-button
      >
      <el-button
        v-if="active < step - 1"
        type="primart"
        icon="el-icon-arrow-right"
        @click="next"
        >下一步</el-button
      >
      <el-button v-if="active == step - 1" type="primary" @click="register"
        >同意以下协议并注册</el-button
      >
      <div class="error">{{ error }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      step: 2,
      active: 0,
      statusMsg: '',
      error: '',
      ruleFrom: {
        textarea: '请仔细阅读以下协议',
        agreed: false,
        name: '',
        code: '',
        pwd: '',
        cpwd: '',
        email: ''
      },
      rules: {
        agreed: [
          {
            validator: (rule, value, callback) => {
              console.log('value:' + value)
              if (value !== true) {
                callback(new Error('请确认同意注册协议'))
              } else {
                callback()
              }
            },
            trigger: 'blur'
          }
        ],
        name: [{
          required: true,
          type: 'string',
          message: '请输入用户名',
          trigger: 'blur'
        }],
        email: [{
          required: true,
          type: 'email',
          message: '请输入邮箱',
          trigger: 'blur'
        }],
        pwd: [{
          required: true,
          message: '创建密码',
          trigger: 'blur'
        }],
        cpwd: [{
          required: true,
          message: '确认密码',
          trigger: 'blur'
        }, {
          validator: (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'))
            } else if (value !== this.ruleFrom.pwd) {
              callback(new Error('两次输入密码不一致'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }]
      }
    }
  },
  layout: 'blank',
  methods: {
    sendMsg: function () {
      const self = this
      let namePass
      let emailPass
      if (self.timerid) {
        return false
      }
      this.$rules['ruleFrom'].validateField('name', (valid) => {
        namePass = valid
      })
      self.statusMsg = ''
      if (namePass) {
        return false
      }
      this.$refs['ruleFrom'].validateField('email', (valid) => {
        emailPass = valid
      })
      // 模拟验证码发送
      if (!namePass && !emailPass) {
        let count = 60
        self.statusMsg = `验证码已发送，剩余${count--}秒`
        self.timerid = setInterval(function () {
          self.statusMsg = `验证码已发送，剩余${count--}秒`
          if (count === 0) {
            clearInterval(self.timerid)
          }
        }, 1000)
      }
    },

    next: function () {
      if (--this.active < 0) this.active = 0
    },

    // 模拟登录
    register: function () {
      this.$refs['ruleForm'].calidate((valid) => {
        if (valid) {
          setTimeout(
            this.$router.push('/login'), 2000
          )
        }
      })
    }
  }
}
</script>

<style  rel="stylesheet/scss" lang="scss">
.page-register {
  .header {
    //border-bottom: 2px solid rgb(235, 232, 232);
    min-width: 980px;
    color: #666;

    header {
      margin: 0 auto;
      padding: 10px 0;
      width: 980px;

    .login {
        float: right;
      }

      .bold {
        font-style: normal;
      }
    }
  }

  .register {
    color: #1890ff;
  }

  a {
    color: #1890ff;
    text-decoration: none;
    background-color: transparent;
    outline: none;
    cursor: pointer;
    transition: color 0.3s;
  }

  > section {
    margin: 0 auto 30px;
    padding-top: 30px;
    width: 980px;
    min-height: 300px;
    padding-right: 550px;
    box-sizing: border-box;

    .status {
      font-size: 12px;
      margin-left: 20px;
      color: #e6a23c;
    }

    .error {
      color: red;
    }
  }

  .footer{
    text-align: center;
  }
}
</style>
